<template>
  <view class="container">
    <z-paging
      ref="paging"
      style="background-color: #eeeeef"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <view slot="top">
        <u-navbar title="同城信息" title-size="36" :border-bottom="false">
          <view class="slot-wrap">
            <view style="width: 690rpx; overflow: auto">
              <view class="location dis-flex flex-y-center" @click="onCity">
                <u-icon
                  class="cate-icon"
                  style=""
                  name="/static/dw-g.png"
                  size="30rpx"
                  mode=""
                ></u-icon>
                <text class="address u-line-1">{{ city ? subCity(city) : '选择' }}</text>
                <u-icon
                  style="margin-left: 10rpx"
                  name="arrow-down"
                  color="#333333"
                  size="26"
                ></u-icon>
              </view>
            </view>
          </view>
        </u-navbar>
        <view class="searchView" @click="onSearch">
          <u-search
            placeholder="找工作、找房源"
            height="64"
            :show-action="true"
            style="width: 100%"
          ></u-search>
        </view>
      </view>

      <view class="card service dis-flex flex-y-between">
        <view
          class="item"
          @click="routeToStore(service)"
          v-for="(service, index) in categoryList"
          :key="index"
        >
          <u-image :src="service.iconUrl" width="90rpx" height="90rpx"></u-image>
          <view class="name"> {{ service.name }}</view>
        </view>
      </view>
      <view class="card screen">
        <scroll-view scroll-x class="scrollView" :enhanced="true" :show-scrollbar="false">
          <view
            class="screen-item"
            :class="screenIndex == i ? 'checked' : ''"
            @click="clickScreen(i)"
            v-for="(screen, i) in screenList"
            :key="i"
          >
            {{ screen.name }}
          </view>
        </scroll-view>
      </view>

      <view class="infomation">
        <view
          class="infomation_box"
          @click="routeTo('/other/merchant-center/merchant-center?id=' + item.shop.id)"
          v-for="(item, index) in itemList"
          :key="index"
        >
          <view class="info-top dis-flex flex-y-center flex-y-between">
            <view class="top-l dis-flex flex-y-center">
              <u-image
                class="user-img"
                style="margin-right: 20rpx"
                :src="item.picUrl"
                width="60rpx"
                height="60rpx"
                border-radius="30"
              ></u-image>
              <view class="user-name">用户昵称</view>
            </view>
            <view class="top-r dis-flex flex-y-center">
              <view class="r-label">生意转让</view>
              <view class="r-label label-r">置顶中</view>
            </view>
          </view>
          <view class="info-label dis-flex flex-y-center">
            <view class="label-item">有停车场</view>
            <view class="label-item">无物业费</view>
            <view class="label-item">精装修</view>
          </view>
          <view class="info-content">
            <view class="info-tl oneline-hide-1"
              >南明区市中心位置1480㎡火锅餐饮店整体转让餐饮店整体转让</view
            >
            <view class="con">
              <view class="con-item">行业类型：美食餐饮</view>
              <view class="con-item">租金：32000元/月</view>
              <view style="color: #10a28f; margin-top: 4rpx">全文</view>
            </view>
            <scroll-view
              scroll-x
              class="scrollView con-imgs"
              :enhanced="true"
              :show-scrollbar="false"
            >
              <u-image
                class="con-img"
                src=""
                width="200rpx"
                height="200rpx"
                border-radius="20"
              ></u-image>
              <u-image
                class="con-img"
                src=""
                width="200rpx"
                height="200rpx"
                border-radius="20"
              ></u-image>
              <u-image
                class="con-img"
                src=""
                width="200rpx"
                height="200rpx"
                border-radius="20"
              ></u-image>
              <u-image
                class="con-img"
                src=""
                width="200rpx"
                height="200rpx"
                border-radius="20"
              ></u-image>
            </scroll-view>
          </view>
          <view class="info-other">
            <view class="info-add dis-flex flex-y-center">
              <u-icon
                style="margin-right: 10rpx"
                name="/static/same_city/dw.png"
                size="20"
              ></u-icon>
              <view class="oneline-hide">贵州省贵阳市南明区花果园大街花果园大街</view>
            </view>
            <view class="info-bt dis-flex flex-y-center flex-y-between">
              <view class="bt-r dis-flex flex-y-center">
                <u-icon
                  style="margin-right: 8rpx"
                  name="/static/same_city/lll_icon.png"
                  size="28"
                ></u-icon>
                <view class="view mar-40">3600</view>
                <u-icon
                  style="margin-right: 8rpx"
                  name="/static/same_city/sj_icon.png"
                  size="28"
                ></u-icon>
                <view class="view">2025-03-06 12:00</view>
              </view>
              <u-icon name="/static/same_city/pl.png" size="28"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
    <view class="fixed-bt" @click="showInfoCate = true">
      <u-icon name="/static/same_city/fbxx.png" size="120"></u-icon>
    </view>

    <u-popup
      v-model="showInfoCate"
      mode="bottom"
      width="750"
      height="880"
      :closeable="true"
      border-radius="15"
    >
      <view class="cate_box">
        <view class="tl">选择发布信息类型</view>
        <view class="notic">
          <view class="noc-tl">【免责声明】</view>
          <view class="noc-content"
            >禁止发布包括但不限于黄，毒，毒，诈骗，淫秽，煽动颠覆国家等违法违规信息，否则一律删除，涉及问题移交公安机关处理！！！发布内容本身与平台无关，平台不负任何责任。</view
          >
        </view>
        <u-image src="@/static/same_city/zd-des.png" width="606rpx" height="28rpx"></u-image>
        <view class="check-tl">请选择下方你要发布的信息类别</view>
        <view class="cate-list dis-flex">
          <view
            class="cate-item"
            @click="routeToPush(service)"
            v-for="(service, index) in categoryList"
            :key="index"
          >
            <u-image :src="service.iconUrl" width="90rpx" height="90rpx"></u-image>
            <view class="name"> {{ service.name }}</view>
          </view>
        </view>
      </view>
    </u-popup>
    <u-popup
      v-model="showCateList"
      mode="bottom"
      width="750"
      height="auto"
      :closeable="false"
      border-radius="20"
    >
      <view class="cate_list_box">
        <view class="list-item tl">{{ showCateListTitle }}</view>
        <view class="list-item" @click="routeToPush(l)" v-for="(l, i) in psuhService.list" :key="i">
          {{ l.name }}
        </view>
        <u-gap height="20"></u-gap>
        <view class="list-item cancel" @click="showCateList = false">取消</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import Vue from 'vue'
export default {
  data() {
    return {
      psuhService: {},
      showInfoCate: false,
      showCateList: false,
      showCateListTitle: '发布',
      categoryList: [
        {
          iconUrl: '/static/same_city/qzzp.png',
          name: '求职招聘',
          key: 'job',
          list: [
            { name: '求职', key: 'qz' },
            { name: '招聘', key: 'zp' }
          ]
        },
        {
          iconUrl: '/static/same_city/tcjy.png',
          name: '房屋租售',
          key: 'house',
          list: [
            { name: '房屋出租', key: 'cz' },
            { name: '房屋出售', key: 'cs' },
            { name: '房屋求租', key: 'qz' },
            { name: '房屋求购', key: 'qg' }
          ]
        },
        {
          iconUrl: '/static/same_city/syzr.png',
          name: '生意转让',
          key: 'bus'
        },
        {
          iconUrl: '/static/same_city/jzfw.png',
          name: '家政服务',
          key: 'service'
        },
        {
          iconUrl: '/static/same_city/xwzr.png',
          name: '寻物找人',
          key: 'search'
        }
      ],
      screenIndex: 0,
      screenList: [
        {
          name: '最新信息',
          type: 'news'
        },
        {
          name: '距离最近',
          type: 'position'
        },
        {
          name: '求职招聘',
          type: 'position'
        },
        {
          name: '房屋租售',
          type: 'position'
        },
        {
          name: '家政服务',
          type: 'position'
        },
        {
          name: '寻物找人',
          type: 'position'
        }
      ],
      itemList: [{}, {}],
      city: '',
      imgStyle: {
        width: '12rem'
      }
    }
  },
  onLoad() {
    this.city = this.$address || ''
    // this.$u.get("/app-api/shop/info/get-category-list?type=0&parentId=1").then(res => {
    // 	res.data.forEach(item => {
    // 		this.categoryList.push(item)
    // 	})
    // 	this.queryList()
    // })
  },
  methods: {
    subCity(city) {
      return city.length > 4 ? city.substr(0, 4) + '...' : city
    },
    onCity() {
      uni.$on('selectAddress', (res) => {
        this.cityCode = res.code
        this.city = res.name
        Vue.prototype.$address = this.city
        this.queryList()
        uni.$off('selectAddress')
      })
      uni.navigateTo({
        url: '/other/select-city/select-city'
      })
    },
    routeTo(url) {
      uni.navigateTo({
        url: url
      })
    },
    routeToStore(item) {
      if (item.key) {
        uni.navigateTo({
          url: '/same_city/show/cate-' + item.key
        })
      }
    },
    routeToPush(item) {
      if (item.key == 'job' || item.key == 'house') {
        if (item.key == 'house') this.showCateListTitle = '发布房屋租售'
        if (item.key == 'job') this.showCateListTitle = '发布求职招聘'
        this.psuhService = item
        this.showCateList = true
      } else {
        this.showInfoCate = false
        uni.navigateTo({
          url: '/same_city/push/push?type=' + item.key
        })
      }
    },
    clickScreen(index) {
      this.screenIndex = index
    },
    queryList(pageNo = 1, pageSize = 10) {
      // this.$u.api.getStoreList({
      // 	pageNo,
      // 	pageSize,
      // 	cityCode: this.cityCode,
      // 	recommend: 1
      // }).then(res => {
      // 	this.$refs.paging.complete(res.data.list)
      // })
    }
  }
}
</script>

<style scoped lang="scss">
page {
  background-color: #f0f0f0;
}
.container {
  position: relative;
}

.fixed-bt {
  position: fixed;
  right: 30rpx;
  bottom: 2vh;
  z-index: 9999;
}

.cate-icon {
  vertical-align: middle;
  margin-right: 10rpx;
}

.address {
  font-size: 30rpx;
}

.searchView {
  padding: 13rpx 20rpx;
  background-color: #fff;
}

.card {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}
.cate_box {
  width: 100%;
  height: 100%;
  padding: 30rpx 20rpx;
  .tl {
    text-align: center;
    font-size: 30rpx;
    margin-bottom: 30rpx;
  }
  .notic {
    background: #f5f5f5;
    border-radius: 10rpx;
    padding: 20rpx;
    margin-bottom: 30rpx;
    .noc-tl {
      font-size: 30rpx;
      color: #fa453c;
      margin-bottom: 20rpx;
    }
    .noc-content {
      font-size: 28rpx;
      line-height: 44rpx;
    }
  }
  .check-tl {
    margin: 30rpx 0;
    font-weight: 600;
    font-size: 30rpx;
  }
  .cate-list {
    flex-wrap: wrap;
    padding: 10rpx 0;
    .cate-item {
      display: flex;
      align-items: center;
      flex-flow: column;
      width: 33%;
      margin-bottom: 30rpx;
      margin-right: 0.5%;
    }
    .cate-item:nth-child(3n) {
      margin-right: 0;
    }
  }
}
.cate_list_box {
  background: #f5f5f5;

  .list-item {
    height: 100rpx;
    background: #ffffff;
    line-height: 100rpx;
    text-align: center;
    font-size: 30rpx;
    color: #333333;
  }
  .tl {
    background: #f5f5f5;
    font-size: 28rpx;
    color: #666666;
  }
}

.screen {
  padding: 30rpx 20rpx;
  font-size: 28rpx;
  color: #333333;
}

.scrollView {
  width: 100%;
  white-space: nowrap;
  box-sizing: border-box;

  .screen-item {
    display: inline-block;
    margin-right: 32rpx;
  }

  .screen-item:last-child {
    margin-right: 0;
  }

  .checked {
    font-weight: 600;
    font-size: 30rpx;
    color: #10a28f;
  }
}

.service {
  padding: 36rpx 0 20rpx 0;
  height: 200rpx;

  .item {
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: column;

    .name {
      font-size: 26rpx;
      color: #333333;
    }
  }
}

.infomation {
  padding: 20rpx;
}

.infomation_box {
  margin-bottom: 20rpx;
  background-color: #fff;
  padding: 30rpx 20rpx 20rpx 20rpx;

  .info-top {
    margin-bottom: 20rpx;

    .user-name {
      font-size: 30rpx;
    }

    .r-label {
      font-size: 20rpx;
      color: #10a28f;
      border-radius: 6rpx;
      border: 1rpx solid #10a28f;
      padding: 8rpx 10rpx;
      margin-left: 10rpx;
      box-sizing: border-box;
    }

    .label-r {
      background: #ed624f;
      color: #ffffff;
      border: 1rpx solid #ed624f;
    }
  }

  .info-label {
    font-size: 20rpx;
    color: #666666;
    margin-bottom: 20rpx;

    .label-item {
      background: #f0f0f0;
      border-radius: 6rpx;
      padding: 8rpx 10rpx;
      margin-right: 10rpx;
    }
  }

  .info-content {
    .info-tl {
      font-size: 28rpx;
      color: #333333;
      margin-bottom: 20rpx;
    }

    .con {
      font-size: 28rpx;
      color: #666666;
      margin-bottom: 20rpx;
      line-height: 46rpx;
    }

    .con-img {
      display: inline-block;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
    }
  }

  .info-other {
    .info-add {
      margin-bottom: 20rpx;
      font-size: 24rpx;
    }

    .view {
      font-size: 24rpx;
      color: #999999;
    }
  }

  .mar-40 {
    margin-right: 40rpx;
  }
}
</style>
